<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{color:red;font-size: 20px;}
        .top{width:100px;height:100px;background:red;padding: 10px;border: solid 20px black;margin: 30px;position: absolute;left:50px;top:50px;}
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="box tip">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="cont">
        <div class="xbox">
            <h3>标题1</h3>
            <h3>标题2</h3>
        </div>
        <h3>标题3</h3>
        <h3>标题4</h3>
    </div>
    <div id="cont">4</div>
    <div id="cont">5</div>
    <div id="cont" class="tip">6</div>
    <ul class="list">
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
        <li>link6</li>
    </ul>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <p>10</p>
</body>
<script src="../jquery.js"></script>
<script>
    // jq的选择器：$(选择器标志)

    
    // console.log($("p"));
    // console.log(document.querySelector("p"));
    // 原生DOM元素和jqDOM的类型不一样，所以格子的方法不能互通
    // console.log($(".msg"));
    // console.log(document.querySelector(".msg"));


    // const obox1 = document.querySelector(".box");
    // obox1.style.background = "red"
    // obox1.css({color:"yellow"})
    // 将原生DOM转成jqDOM
    // $(obox1).css({color:"yellow"})

    // const obox2 = $("#cont");
    // obox2.css({color:"yellow"})
    // obox2.style.background = "pink"
    // obox2[0].style.background = "pink"
    // obox2.get(0).style.background = "pink"


    // ============


    // DOM方法

    // 样式：css

    // // 获取单条样式
    // // $(".box").css(一个字符)
    // console.log($(".box").css("color"))
    // // 获取多条样式
    // // $(".box").css(一个数组)
    // console.log($(".box").css(["color","font-size"]))
    // // 设置单条样式
    // // $(".box").css(两个字符)
    // $(".box").css("background","pink")
    // // 设置多条样式
    // // $(".box").css(一个对象)
    // $(".box").css({
    //     width:"100px",
    //     border:"solid 2px black"
    // })

    // ============

    // // 属性：attr
    // // 一个字符：获取
    // console.log($(".box").attr("class"))
    // // 两个字符：设置
    // $(".box").attr("title","哈哈哈哈啊")
    // // 一个对象：设置
    // $(".box").attr({
    //     a:10,b:20,c:30
    // })
    // // 删除：removeAttr
    // $(".box").removeAttr("a")
    // $(".box").removeAttr("b")

    // ============

    // 过滤器

    // 后面的兄弟
    // $(".cont").next("div").css("border","solid 1px black");
    // $(".cont").nextAll("div").css("border","solid 1px black");
    // $(".cont").nextUntil(".tip").css("border","solid 1px black");
    
    // 前面的兄弟
    // $(".cont").prev("div").css("border","solid 1px black");
    // $(".cont").prevAll("div").css("border","solid 1px black");
    // $(".cont").prevUntil(".tip").css("border","solid 1px black");
    
    // 所有兄弟
    // $(".cont").siblings("div").css("border","solid 1px black");

    // 父
    // $(".xbox").parent().css("border","solid 1px black");
    // $(".xbox").parents().css("border","solid 1px black");
    // $(".xbox").parentsUntil("html").css("border","solid 1px black");

    // 子
    // find后代
    // $(".cont").find("h3").css("border","solid 1px black");
    // children子
    // $(".cont").children("h3").css("border","solid 1px black");
    // 某个子
    // $(".list").children("li").first().css("border","solid 1px black");
    // $(".list").children("li").last().css("border","solid 1px black");
    // $(".list").children("li").eq(3).css("border","solid 1px black");

    // 回到上一个操作的元素：end
    // $(".list").children("li").eq(3).css("border","solid 1px black").siblings("li").css("background","red").end().css("color", "yellow")

    // ......

    // ============

    // 盒模型尺寸类属性获取
    

    // // content
    // console.log( $(".top").width() );
    // $(".top").width(300).css("border-color","pink")
    
    // // content + padding
    // console.log( $(".top").innerWidth() );
    // $(".top").innerWidth(300).css("border-color","pink")
    
    // // content + padding + border
    // console.log( $(".top").outerWidth() );
    // $(".top").outerWidth(300).css("border-color","pink")
    
    // // position + margin
    // console.log( $(".top").offset() );
    // $(".top").offset({left:200,top:200}).css("border-color","pink")

    // 以上方法不传参为获取，传参为设置
    
    // // position
    // console.log( $(".top").position() );


    // ============

    




    // function fn(){
    //     const type = Object.prototype.toString.call(arguments[0]);
    //     if(arguments.length > 1){
    //         console.log("两个字符")
    //     }else if( type === "[object String]" ){
    //         console.log("一个字符")
    //     }else if( type === "[object Array]" ){
    //         console.log("一个数组")
    //     }else if( type === "[object Object]" ){
    //         console.log("一个对象")
    //     }
    // }
    // fn("hello")
    // fn("hello", "world")
    // fn({})
    // fn([])


</script>
</html>